<template>
	<view>
		<!-- 自定义导航栏 -->
		<uni-nav-bar left-icon="arrowleft" @clickLeft="back" :border="false">
			<view class="flex justify-center align-center" style="width: 100%;">
				<text>所有人可见</text><text class="iconfont icon-shezhi ml-1"></text>
			</view>
		</uni-nav-bar>

		<!-- 文本域 -->
		<textarea v-model="content" placeholder="说一句话吧!～" class="uni-textarea px-2" />
		<!-- 图片上传组件 -->
		<upload-imge ref='myUploadimg' :list="imageList" :show="isShowUploadImg" @change='changeImge'></upload-imge>
		<!-- 底部按钮区 -->
		<view class="fixed-bottom bg-white border flex align-center " style="height: 85rpx; ">
			<view class="iconfont icon-caidan footer-btn animated" hover-class="jello"></view>
			<view class="iconfont icon-huati footer-btn animated"  hover-class="jello"></view>
			<view class="iconfont icon-tupian footer-btn animated" hover-class="jello" @click="iconClickImage"></view>
			<view class="bg-main text-white ml-auto flex justify-center align-center rounded mr-2 animated " hover-class="jello" style="width: 140rpx; height: 60rpx;">发送</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "../../components/uni-ui/uni-nav-bar/uni-nav-bar.vue" //自定义导航
	import uploadImge from "../../components/common/upload-imge.vue" //图片上传组件
	export default {

		components: {
			uniNavBar,
			uploadImge
		},
			
		computed:{
			isShowUploadImg(){
				return this.imageList.length>0
			}
		},
		
	
		data() {
			return {
				content:"", //文稿的内容
				imageList:[], // 图片的内容
				showBack :false,
			}
		},
		onBackPress(){
			if((this.content!==""|| this.imageList.length>0)&& this.showBack===false){
				uni.showModal({
					content:'是否保存为草稿',
					showCancel:true,
					cancelText:'不保存',
					confirmText:'保存',
					success:(res)=>{
							
						if(res.confirm) {
							//保存
							this.store()
						}else{
							// 不保存
							uni.removeStorage({
								key:'add-input'
							})
						}
						uni.navigateBack({
							delta:1,
						})
					}
				})
				this.showBack=true
				return true
			}
		
		},
		onLoad(){
			uni.getStorage({
				key:'add-input',
				success:res=>{
					if(res.data){
						let obj= JSON.parse(res.data)
						console.log('从草稿中取出来的值',obj)
						this.content= obj.content;
						this.imageList= obj.imageList
					}
				}
				
			})
		},
		
		methods: {
			
			//选择图片
			iconClickImage(){
				this.$refs.myUploadimg.chooseImage()	
			},
			//返回上一及
			back(){
				uni.navigateBack({
					delta:1,
				})
				
			},
			// 选中的图片
			changeImge(val){
				console.log('选中的图片',val)
				this.imageList=val
			},
			//保存草稿的方法
			store(){
				//保存在本地的存储
				uni.setStorage({
				    key: 'add-input',
				    data: JSON.stringify({
						content:this.content,
						imageList:this.imageList
					}),
				});
				
			}	
					
		}
	}
</script>

<style scoped>
		
	.footer-btn{
		height: 86rpx;
		width: 86rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	
	}

</style>
